<template>
  <div class="container">
    <!-- 顶部信息 -->
    <div class="header">
      <div class="doctor-info">
        <el-avatar 
          :size="50" 
          src="https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
        />
        <span class="title">HI! 糖小糖 医生</span>
        <el-button type="danger" @click="back">返回</el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <el-row :gutter="20" class="main-content">
      <!-- 左侧列：包含病人信息和护理记录 -->
      <el-col :span="12">
        <!-- 病人信息卡片 -->
        <div class="left-section info-card">
          <div class="patient-basic">
            <div class="bed-info">
              <span class="bed-number">{{patiemtData.bedCode}}床</span>
              <span class="patient-name">{{patiemtData.name}}</span>
            </div>
            <div class="patient-info">
              <span class="age">{{ patiemtData.age}}岁</span>
              <el-icon class="gender-icon"><Male /></el-icon>
              <el-tag size="small" class="care-level">二级护理</el-tag>
              <el-tag size="small" type="danger" class="status">病危</el-tag>
            </div>
          </div>

          <div class="divider"></div>

          <div class="io-stats">
            <div class="io-item">
              <div class="io-label">近24小时</div>
              <div class="io-label">总入量 ml</div>
              <div class="io-value">{{ totalInput }}</div>
            </div>
            <div class="io-item">
              <div class="io-label">近24小时</div>
              <div class="io-label">总出量 ml</div>
              <div class="io-value">{{ totalOutput }}</div>
            </div>
          </div>

          <div class="detail-link" @click="handleDetailClick">
            <div class="arrow-button">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>

        <!-- 护理记录卡片 -->
        <div class="left-section vital-signs">
          <div class="section-title">护理记录</div>
          <div class="vital-signs-grid">
            <div class="vital-sign">
              <div class="value">{{patientReCordData[0]?.breathe}}</div>
              <div class="label">呼吸 bpm</div>
            </div>
            <div class="vital-sign">
              <div class="value">{{patientReCordData[0]?.maxBP}}/{{patientReCordData[0]?.minBP}}</div>
              <div class="label">无创血压 mmHg</div>
            </div>
            <div class="vital-sign">
              <div class="value">{{patientReCordData[0]?.temperature}}</div>
              <div class="label">体温 °C</div>
            </div>
            <div class="vital-sign">
              <div class="value">{{patientReCordData[0]?.rate}}</div>
              <div class="label">脉率 bpm</div>
            </div>
            <div class="vital-sign">
              <div class="value">{{patientReCordData[0]?.oximetry}}</div>
              <div class="label">血氧 %</div>
            </div>
            <div class="vital-sign">
              <div class="value">{{patientReCordData[0]?.heartRate}}</div>
              <div class="label">心率 bpm</div>
            </div>
          </div>
          <div class="detail-link" @click="handleNursingClick">
            <div class="arrow-button">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 右侧明细表格 -->
      <el-col :span="12">
        <div class="details-section">
          <el-radio-group v-model="activeTab" class="radio-tabs">
            <el-radio-button label="input">入量明细</el-radio-button>
            <el-radio-button label="output">出量明细</el-radio-button>
            <el-radio-button label="nursing">护理明细</el-radio-button>
          </el-radio-group>

          <div class="table-container" v-if="activeTab === 'input'">
            <el-table :data="inputData" style="width: 100%" :max-height="400">
              <el-table-column type="index" label="序号" width="70" />
              <el-table-column prop="adiName" label="入量名称" />
              <el-table-column prop="inValue" label="入量" width="100" />
              <el-table-column prop="adItDate" label="录入时间" width="160" />
              <el-table-column prop="adiPeople" label="录入人" width="100" />
            </el-table>
          </div>

          <div class="table-container" v-if="activeTab === 'output'">
            <el-table :data="outputData" style="width: 100%" :max-height="400">
              <el-table-column type="index" label="序号" width="70" />
              <el-table-column prop="outputName" label="出量名称" />
              <el-table-column prop="outValue" label="出量" width="100" />
              <el-table-column prop="outDate" label="录入时间" width="160" />
              <el-table-column prop="outPeople" label="录入人" width="100" />
            </el-table>
          </div>

          <div class="table-container" v-if="activeTab === 'nursing'">
            <el-table :data="patientReCordData" style="width: 100%" :max-height="400">
              <el-table-column type="index" label="序号" width="70" />
              <el-table-column prop="breathe" label="呼吸bpm"width="100" />
              <el-table-column prop="maxBP" label="血压高 mmHg" width="100"/>
              <el-table-column prop="minBP" label="血压低 mmHg" width="100"/>
              <el-table-column prop="temperature" label="体温℃"  width="100"/>
              <el-table-column prop="rate" label="脉率bpm" width="100" />
              <el-table-column prop="oximetry" label="血氧%"  width="100"/>
              <el-table-column prop="heartRate" label="心率bpm" width="100" /> 
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div> 
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed, watch } from 'vue'
import { Male, ArrowRight } from '@element-plus/icons-vue'
import { useRouter,useRoute } from 'vue-router'
import http from '@/api/http';
import axios from 'axios';

const route = useRoute()
const router = useRouter()
const activeTab = ref('input')

const back=()=>{
  router.push('/PatientOne');
}

// 处理详情点击
const handleDetailClick = () => {
  const name=route.query.name
  const patientCode = route.query.patientCode
  const number=route.query.number
   router.push({
        path: "/SummaryTwo",
        query: { 
            number: number,
            name:name,
            patientCode: patientCode
        }
    })
}

// 处理护理记录点击
const handleNursingClick = () => {
  router.push('/nursing-record')
}

const getModel=reactive({
  inputValue:0,
  outputValue:0
})

 // 入量数据
const inputData = ref<any>([])
// 计算总入量
const totalInput = computed(() => {
  return inputData.value.reduce((sum:any, item:any) => sum + Number(item.inValue || 0), 0)
})
const getInput=()=>{
  const patientCode = route.query.patientCode
  console.log(patientCode)
  http.get('api/DoctorManage/GetInRecords?PatientCode=' + patientCode)
  .then(res=>{
    console.log('入量',res.data)
    inputData.value=res.data
  })
}

// 出量数据
const outputData = ref<any>([])
// 计算总出量
const totalOutput = computed(() => {
  return outputData.value.reduce((sum:any, item:any) => sum + Number(item.outValue || 0), 0)
})
const getOutput=()=>{
  const patientCode = route.query.patientCode
  console.log(patientCode)
  http.get('/api/DoctorManage/GetOutRecords?PatientCode=' + patientCode)
  .then(res=>{
    console.log('出量',res.data)
    outputData.value=res.data
  })
}
//患者信息
const patiemtData=ref<any>([])
const getPatiemt=()=>{
  const patientCode = route.query.patientCode
  http.get('api/DoctorManage/GetPatientsByPatientCode?PatientCode=' + patientCode)
  .then(res=>{
    console.log('患者',res.data);
    patiemtData.value=res.data[0]
  })
}

//护理记录
const patientReCordData=ref<any[]>([])
const getPatientReCord=()=>{
  const patientCode = route.query.patientCode
  http.get('api/DoctorManage/GetPatientReCords?PatientCode=' + patientCode)
  .then(res=>{
    console.log('护理记录',res.data);
    patientReCordData.value=res.data || []
  })
}


watch(() => route.query, (newId) => {
  if (newId) {
    //入量
    getInput()
    //出量
    getOutput()
    //患者信息
    getPatiemt();
    //护理记录
    getPatientReCord();
      }
})


onMounted(()=>{
//入量
getInput()
//出量
getOutput()
//患者信息
getPatiemt();
//护理记录
getPatientReCord();
})


</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  margin-bottom: 30px;
}

.doctor-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title {
  font-size: 20px;
  font-weight: normal;
}

.main-content {
  margin-top: 20px;
}

/* 左侧部分样式 */
.left-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.info-card {
  position: relative;
}

.patient-basic {
  margin-bottom: 20px;
}

.bed-info {
  margin-bottom: 15px;
}

.bed-number {
  font-size: 32px;
  color: #00b3ff;
  margin-right: 12px;
}

.patient-name {
  font-size: 24px;
  color: #333;
}

.patient-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.age {
  font-size: 16px;
  color: #333;
}

.gender-icon {
  color: #409EFF;
  font-size: 18px;
}

.care-level {
  background-color: #f4f4f5;
  color: #909399;
  border: none;
}

.divider {
  height: 1px;
  background-color: #EBEEF5;
  margin: 20px 0;
}

.io-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.io-item {
  text-align: left;
}

.io-label {
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.io-value {
  font-size: 32px;
  color: #333;
  margin-top: 8px;
}

.detail-link {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}

.arrow-button {
  width: 40px;
  height: 40px;
  background-color: #409EFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s;
}

.arrow-button:hover {
  background-color: #66b1ff;
  transform: translateX(2px);
}

/* 护理记录样式 */
.vital-signs {
  margin-bottom: 0;
}

.section-title {
  color: #409EFF;
  font-size: 16px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #EBEEF5;
}

.vital-signs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.vital-sign {
  text-align: center;
}

.vital-sign .value {
  font-size: 24px;
  color: #333;
  margin-bottom: 8px;
}

.vital-sign .label {
  font-size: 14px;
  color: #666;
}

/* 右侧部分样式 */
.details-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.radio-tabs {
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.table-container {
  margin-top: 20px;
}

:deep(.el-radio-button__inner) {
  padding: 8px 20px;
}

:deep(.el-table) {
  --el-table-header-bg-color: #f5f7fa;
}

:deep(.el-tag) {
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
}
</style>